<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>身份证号码生成器</title>
    <link href="https://www.sunyuchao.com/static/layui/css/layui.css"  rel="stylesheet">

    <link href="https://www.sunyuchao.com/static/css/fontawesome4.7.0/css/font-awesome.css"  rel="stylesheet">
    <link href="https://www.sunyuchao.com/static/css/utilscommon.css" rel="stylesheet">
    <link href="https://www.sunyuchao.com/static/css/common.css" rel="stylesheet">
    <link href="https://www.sunyuchao.com/static/css/reply.css" rel="stylesheet">

    <script th:src="${iconfontUrl}"></script>

    <style>
        #content{margin-top: 20px;}
        .tab-wrap{background-color: white;padding: 3px 10px;margin-top: 10px;}
        .tab-wrap .tab-wrap-square{padding: 5px;margin-bottom: 10px;position: relative;border-bottom: 1px solid #e7e7e7;
            padding-bottom: 10px;padding-top: 12px;}
        .tab-wrap .tab-wrap-square::after {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2.5px!important;
            width: 100px;
            background-color: #51aded;
            content: '';
            transition:width 2s;
            -moz-transition:width 2s; /* Firefox 4 */
            -webkit-transition:width 2s; /* Safari and Chrome */
            -o-transition:width 2s; /* Opera */
        }
        /*鼠标悬停div修改子元素样式*/
        .tab-wrap:hover .tab-wrap-square:first-child::after{
            width: 400px;
        }

        .tab-wrap .reply-all-head{font-size: 18px;font-weight: bold;}

        #result{margin-left: 40px;max-height:600px;overflow-y: scroll;}
        #result h3{margin-top: 10px;}


        /*手机*/
        @media screen and (max-width: 980px) {
            .smb-right{width:88%;}
        }

    </style>
</head>
<body>
<!--搜索-->
<div th:replace="index :: search"></div>
<!--右下角固定-->
<div th:replace="index :: permanent"></div>
<div th:replace="index :: top"></div>
<div class="content">
    <h1 class="square">
        <span class="f-right">此情可待成追忆，只是当时已惘然 —— 李商隐</span>
    </h1>
    <input type="hidden" th:value="${bindId}" name="id">
    <div class="left">
        <h2>身份证号码生成器</h2>
        <form class="layui-form" style="margin-top: 20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">出生地</label>
                <div class="layui-input-inline" style="width: 160px;">
                    <select name="province" lay-filter="province" lay-verify="required">
                        <option value=""></option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 160px;">
                    <select name="city" lay-filter="city" lay-verify="required">
                        <option value=""></option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 160px;">
                    <select name="district" lay-filter="district" lay-verify="required">
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">暂时只有安徽省</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <select name="year" lay-filter="year" lay-verify="required">
                        <option value=""></option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 100px;">
                    <select name="month" lay-filter="month" lay-verify="required">
                        <option value=""></option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 100px;">
                    <select name="day" lay-filter="day" lay-verify="required">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" value="1" title="男" checked>
                    <input type="radio" name="sex" value="0" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生成个数</label>
                <div class="layui-input-inline">
                    <input type="number" name="count"  placeholder="请输入生成个数" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="go">开始生成</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <h2>结果列表</h2>
        <div id="result">

        </div>
        <div style="margin-top: 20px;">
            <h2 style="color: red;">警告：该功能仅供程序员测试功能使用，切勿用于非法用途</h2>
        </div>

        <div class="tab-wrap" style="padding: 10px 20px;">
            <h3 class="tab-wrap-square">留言评论</h3>

            <div th:replace="onlineutils/linux :: messageBox"></div>
            <h2 class="reply-all-head">所有回复</h2>
            <div th:replace="onlineutils/linux :: comment"></div>
            <div th:if="${pageTotal != 0}" class="layui-btn-container" style="margin-top: 20px;">
                <a th:href="@{/util/idCardCode(page=${page-1},bindId=${bindId})}" th:class="${page == 1 ? 'layui-btn layui-btn-disabled':'layui-btn'}"> <i class="layui-icon layui-icon-left"></i></a>
                <a th:href="@{/util/idCardCode(page=${num},bindId=${bindId})}" th:class="${num == page ? 'layui-btn layui-btn-normal':'layui-btn'}" th:each="num : ${pageNumList}" th:text="${num}"></a>
                <a th:href="@{/util/idCardCode(page=${page+1},bindId=${bindId})}" th:class="${page == pageTotal ? 'layui-btn layui-btn-disabled':'layui-btn'}"> <i class="layui-icon layui-icon-right"></i></a>
            </div>
        </div>
    </div>
    <div class="right">
        <div style="width: 100%;height: 200px;background-color: #cdd;margin-top: 20px;">

        </div>
        <div style="width: 100%;height: 200px;background-color: #cdf;margin-top: 20px;">

        </div>
        <div style="width: 100%;height: 200px;background-color: #dfc;margin-top: 20px;">

        </div>
    </div>
</div>


<script src="https://www.sunyuchao.com/static/js/heart.js" ></script>
<script src="https://www.sunyuchao.com/static/layui/layui.js" ></script>
<script src="https://www.sunyuchao.com/static/js/jquery3.3.1.min.js"></script>
<script src="https://www.sunyuchao.com/static/js/reply.js"></script>

<script src="https://www.sunyuchao.com/static/js/common.js"></script>
<!--子回复模板-->
<script type="text/template" id="childMsg">
    <div class="msg-history">
        <div class="mh-left">
            <img class="radius" src="{avatar}" width="40" height="40">
        </div>
        <div class="mh-right">
            <input type="hidden" class="userId" value="{userId}">
            <p>
                        <span style="float: left;"><span><a class="comment" href="javascript:;">{commentUsername}</a></span> 回复  <span>
                            <a href="javascript:;" class="commented">{commentedUsername}</a></span></span>
                <span style="float: right;" class="timeago" datetime="{time}"></span>
            </p>
            <p class="reply-content">
                {content}
            </p>
            <p class="operate">
                <span class="muted"> <a onclick="openChildReply(this)" href="javascript:;">回复</a></span>
            </p>
        </div>
        <hr>
    </div>
    <div class="layui-clear"></div>
</script>
<!--1级回复模板-->
<script type="text/template" id="FirstMsg">
    <li class="item">
        <div class="item-left">
            <img class="radius" src="{avatar}" width="50" height="50">
        </div>
        <div class="item-right">
            <p>
                <span style="float: left;"><a href="javascript:;" class="floor">{commentUsername}</a></span>
                <span style="float: right;" class="timeago" datetime="{time}"></span>
            </p>
            <p class="reply-content">
                {content}
            </p>
            <p class="operate">
                <span class="muted"> <a class="show" onclick="show(this)" href="javascript:;">展开</a>(<span>0</span>)</span>
                <span class="muted"> <a onclick="openReply(this)" href="javascript:;">回复</a></span>
                <span class="muted"> <a href="#"><i class="layui-icon layui-icon-praise"></i>17</a></span>
                <span class="muted"> <a href="#"><i class="layui-icon layui-icon-tread"></i>17</a></span>
            </p>
            <div class="msg-content">

            </div>
            <div class="item-child-smbx">
                <input type="hidden" class="receiverUserId" value="{commentId}">
                回复 <span class="receiver">{commentUsernameCopy}</span>
                <div contenteditable="true" class="layui-textarea" placeholder=""></div>
                <div class="smb-r-bottom">
                    <a onclick="loadFace(this)" href="javascript:;"><img src="/layui/images/face/1.gif"></a>
                    <div class="face-frame"></div>
                    <button onclick="saveMsg(this)" class="layui-btn layui-btn-normal" style="float: right;margin-right: 8px;">留言</button>
                </div>
            </div>

        </div>
        <div class="layui-clear"></div>
    </li>
</script>

<script th:inline="javascript">
    var currentUser=[[${session.loginUser}]];
    var currentUserId;
    if(currentUser != null){
        currentUserId=currentUser.id;
    }
</script>
<script>
    /**
     * 留言给我
     * */
    function msgToMe(obj) {
        var frameObj = $(obj).parent().prev();
        var replyEntity={};
        replyEntity.content = $(frameObj).html().replace(/&nbsp;/ig,'');;//回复内容
        replyEntity.commentedUserId=1;//被回复者默认是我（生产中放到后台）
        replyEntity.level = 1;
        replyEntity.type = 11;
        replyEntity.userId=currentUserId;
        replyEntity.bindId=$("input[name=id]").val();
        if($.trim(replyEntity.content).length == 0){
            alert("请输入内容")
            return false;
        }
        var retInfo={};
        var flag=false;
        $.ajax({
            url:"/userComment/saveFirstMessage",
            type:"POST",
            data:replyEntity,
            async:false,
            success:function (e) {
                if(e.success){
                    retInfo=e.data;
                    flag=true;
                }else{
                    layui.layer.alert(e.message);
                }
            },dataType: "json"
        });
        //校验
        if(!flag){
            return;
        }
        var html=$("#FirstMsg").html();
        var arr = [];
        arr.push(formatTemplate(retInfo, html));
        $("#message-comment-body").prepend(arr.join(''));
        $(frameObj).html("");//清空文本域
        layui.timeago.render($('.timeago'));
    }




    /**
     * 保存评论
     * */
    function saveMsg(obj,parentId){

        //获取回复信息
        var frameObj = $(obj).parent().prev();
        var msg = $(frameObj).html().replace(/&nbsp;/ig,'');;//回复信息
        var receiver = $(obj).parent().parent().children(".receiver");
        var receiverUserId = $(obj).parent().parent().children(".receiverUserId");
        var commented = $(receiver).html();
        var commentedId = $(receiverUserId).val();
        var replyEntity={};
        replyEntity.userId=currentUserId;
        replyEntity.commentedUserId=commentedId;
        replyEntity.content=msg;
        replyEntity.level=2;
        replyEntity.type=11;
        replyEntity.bindId=$("input[name=id]").val();
        replyEntity.parentId=parentId;
        var flag=false;
        var retInfo={};
        $.ajax({
            url:"/userComment/saveChildrenMessage",
            type:"POST",
            data:replyEntity,
            async:false,
            success:function (e) {
                if(e.success){
                    retInfo=e.data;
                    flag=true;
                }else{
                    layui.layer.alert(e.message);
                }
            },dataType:"json"
        });
        //校验
        if(!flag){
            return;
        }
        var prev = $(obj).parent().parent().prev();
        if($(prev).is(":hidden")){
            $(prev).show();
        }

        var html = $("#childMsg").html();
        var arr = [];
        arr.push(formatTemplate(retInfo, html));
        $(prev).append(arr.join(''));//追加回复信息
        var show = $(obj).parent().parent().prev().prev().find(".show");//展开按钮
        $(show).html("关闭");

        $(frameObj).html("");//清空回复框
        layui.timeago.render($('.timeago'));
    }
</script>
<script>
    layui.config({base:'https://www.sunyuchao.com/static/layui/extends/'});
    layui.use(['form','layer','upload','timeago'], function(){
        var form=layui.form,
            $=layui.jquery,
            timeago=layui.timeago,
            layer=layui.layer;
        layer.alert("该生成器只用于程序员测试使用，切勿用于非法用途，否则后果自负！",{icon:0,title:"警告"});
        timeago.render($('.timeago'));

        //初始化年月日选项
        var year = new Date().getFullYear();
        for(var i = 1990; i <= year ; i++){
            $("select[name=year]").append("<option value='"+i+"'>"+i+"</option>");
        }
        for(var j =1;j <= 12 ; j++){
            var res =j < 10 ?  "0"+j : "" + j;

            $("select[name=month]").append("<option value='"+res+"'>"+res+"</option>");
        }

        //初始化省份
        $.ajax({
            url:"/util/idCardCode/getProvincesByLevel",
            type:"GET",
            async:false,
            data:{"level":1},
            success:function (e) {
                var html="";
                for(var i = 0;i<e.data.length;i++){
                    html+="<option value='"+e.data[i].id+"'>"+e.data[i].name+"</option>";
                }

                $("select[name=province]").append(html);
            },dataType:"json"
        });
        form.render('select');

        //选择月份出现对应的天数
        form.on('select(month)', function (data) {
            var month = data.value;
            var year =  $("select[name=year]").val();
            $.ajax({
                url:"/util/idCardCode/getDayCountByYearAndMonth",
                type:"POST",
                data:{"year":year,"month":month},
                success:function (e) {
                    $("select[name=day]").empty();
                    for(var k = 1;k <= parseInt(e);k++){
                        var res =k < 10 ?  "0"+k : "" + k;
                        $("select[name=day]").append("<option value='"+res+"'>"+res+"</option>");
                        form.render('select');
                    }
                },dataType:"text"
            });//去后台算当前年月的天数
        });



        form.on('select(province)', function (data) {
            var provinceId = data.value;
            //去获取当前省的所有市
            $.ajax({
                url:"/util/idCardCode/getCitysByParentId",
                type:"GET",
                data:{"provinceId":provinceId},
                success:function (e) {
                    var html="";
                    for(var i = 0;i<e.data.length;i++){
                        html+="<option value='"+e.data[i].id+"'>"+e.data[i].name+"</option>";
                    }
                    $("select[name=city]").empty();
                    $("select[name=city]").append(html);
                    form.render('select');
                },dataType:"json"
            });

        });
        form.on('select(city)', function (data) {
            var cityId = data.value;
            $.ajax({
                url:"/util/idCardCode/getCitysByParentId",
                type:"GET",
                data:{"provinceId":cityId},
                success:function (e) {
                    var html="";
                    for(var i = 0;i<e.data.length;i++){
                        html+="<option value='"+e.data[i].id+"'>"+e.data[i].name+"</option>";
                    }
                    $("select[name=district]").empty();
                    $("select[name=district]").append(html);
                    form.render('select');
                },dataType:"json"
            });
        });

        //监听提交
        form.on('submit(go)', function(data){
            var count = data.field.count;
            if(count <= 0){
                layer.msg("请输入正确的生成个数");
                return false;
            }
            $.ajax({
                url:"/util/idCardCode/generate",
                type:"POST",
                async:false,
                data:data.field,
                success:function (e) {
                    if(e.code != 0){
                        layer.msg(e.message);
                    }else{ //拿到生成的数据
                        $("#result").empty();
                        for(var i =0 ;i<e.data.length ;i++){
                            $("#result").append("<h3>"+e.data[i]+"</h3><hr>");
                        }
                    }
                },dataType:"json"
            });
            return false;
        });

    });
</script>
<script src="/login.js"></script>
</body>
</html>